<template>
    <ui-main title="按钮组">
        <div class="flex-1">
            <el-button @click="toggleEdit" class="m-b-15" type="primary">切换编辑模式</el-button>

            <div class="flex ui">
                <div class="flex-1">
                    <el-table :data="tableData" border style="width:90%" max-height="500" size=mini>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="地址" prop="address"></el-table-column>
                        <el-table-column label="操作" width="190px" fixed="right">
                            <template slot-scope="scope">
                                <ui-buttons>
                                    <ui-tab-btn :key="'a'" name="停用" v-if="flag"></ui-tab-btn>
                                    <ui-tab-btn :key="'c'" name="启用" v-if="!flag"></ui-tab-btn>
                                    <ui-tab-btn name="提交"></ui-tab-btn>
                                    <ui-tab-btn name="导出"></ui-tab-btn>
                                    <ui-tab-btn name="查看"></ui-tab-btn>
                                    <ui-tab-btn name="编辑" v-show="scope.row.editable"></ui-tab-btn>
                                    <ui-tab-btn name="删除" v-show="scope.row.editable"></ui-tab-btn>
                                    <ui-tab-btn name="审核" v-show="scope.row.editable"></ui-tab-btn>
                                </ui-buttons>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex-1">
                    <el-table :data="tableData1"
                        style="width: 90%"
                        row-key="id"
                        border
                        lazy
                        :load="load"
                        @expand-change="expandChange"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="date" label="日期" width="180"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                        <el-table-column prop="address" label="地址"></el-table-column>
                        <el-table-column label="操作" width="190px" fixed="right">
                            <template slot-scope="scope">
                                <ui-buttons>
                                    <ui-tab-btn name="停用" v-show="scope.row.editable"></ui-tab-btn>
                                    <ui-tab-btn name="启用" v-show="!scope.row.editable"></ui-tab-btn>
                                    <ui-tab-btn v-has:save  name="提交"></ui-tab-btn>
                                    <ui-tab-btn v-has:save name="导出"></ui-tab-btn>
                                    <ui-tab-btn v-has:save name="查看"></ui-tab-btn>
                                    <ui-tab-btn v-has:save name="编辑" ></ui-tab-btn>
                                    <ui-tab-btn name="删除" v-show="opPermission(scope)"></ui-tab-btn>
                                    <ui-tab-btn name="审核" v-show="opPermission(scope)"></ui-tab-btn>
                                    <ui-tab-btn name="审核" v-show="opPermission(scope)"></ui-tab-btn>
                                    <ui-tab-btn name="审核" v-show="opPermission(scope)"></ui-tab-btn>
                                </ui-buttons>
                                <!--<ui-buttons>
                                    <ui-tab-btn v-has:save v-show="!scope.row.sup_id && opPermission(scope)" name="增加"
                                        @click="add(scope)"></ui-tab-btn>
                                    <ui-tab-btn v-has:view name="查看" @click="view(scope)"></ui-tab-btn>
                                    <ui-tab-btn v-show="opPermission(scope)" v-has:update name="编辑" @click="edit(scope)"></ui-tab-btn>
                                    <ui-tab-btn v-show="opPermission(scope)" v-has:passwrod name="密码管理" icon="icon key"
                                        @click="passwrod(scope)"></ui-tab-btn>
                                    <ui-tab-btn v-show="opPermission(scope)" v-has:ip name="IP管理" icon="icon product hunt"
                                        @click="ip(scope)"></ui-tab-btn>
                                    <ui-tab-btn v-show="opPermission(scope)" v-has:delete name="删除" @click="deleteRow(scope)"></ui-tab-btn>
                                </ui-buttons>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="flex-2">
            <ui-load-md file="buttons"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                flag : true,
                tableData: [
                    {
                        name: '带有编辑的行',
                        editable: true ,
                        address:'在计算机科学中，内存中每个用于数据存取的基本单位,内存中每个用于数据存取的基本单位'
                    },
                    { name: '普通行1' },
                    { name: '带有编辑的行2', editable: true},
                    { name: '带有编辑的行2', editable: true},
                    { name: '带有编辑的行2', editable: true},
                    { name: '带有编辑的行2', editable: true},
                    { name: '带有编辑的行2', editable: true},
                    { name: '带有编辑的行2', editable: true},
                ],
                tableData1: [],
                expand:false
            }
        },
        mounted() {
            setTimeout(() => {
                this.tableData1.push({
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    editable: true,
                    children: [{
                        id: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        id: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }]
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    hasChildren: true
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                    editable: true,
                })
            }, 1000)
        },

        methods:{
            toggleEdit(){
                this.tableData[0].editable = !this.tableData[0].editable
                this.tableData1[0].editable = !this.tableData1[0].editable
            },
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 33,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄',
                            editable: true,
                        }, {
                            id: 34,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }
                    ])
                }, 1000)
            },
            opPermission(scope) {
                return false

            },
            expandChange(){
                console.log('expandChange')
            }

        },
    }
</script>
